<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用户角色编辑</title> 
#@resources()
<link rel="stylesheet" href="#(ctx)/res/jsaas/css/role/role.css" />
</head>
<body>
	<div class="layui-container">
		<input type="hidden" id="userId" value="#(userId)" />
		<form class="layui-form" action="">

			<div class="layui-form-item">
				<label class="layui-form-label">角色</label>
				<div class="layui-input-block">
					#for(role : roles) <input type="checkbox" name="chkroleid"
						#if(role.checked) checked="checked" #end
						value="#(role.id)" title="#(role.desc)">
					<div class="layui-unselect layui-form-checkbox" lay-skin="">
						<span>#(role.desc)</span><i class="layui-icon"></i>
					</div>
					#end
				</div>
			</div>

			<div class="edit-btns">
				<button class="layui-btn layui-btn-sm" lay-submit lay-filter="save">保存</button>
				<button class="layui-btn layui-btn-primary layui-btn-sm"
					@event="close">取消</button>
			</div>
		</form>
	</div>
	<script type="text/javascript">
		layui.use([ 'layer', 'form' ], function() {
			var layer = layui.layer;
			var form = layui.form;

			form.on('submit(save)', function(data) {
				//后台保存数据
				var arr = [];
				$("input:checkbox[name=chkroleid]:checked").each(function(){
				    arr.push($(this).val());
				});
				var userId = $("#userId").val();
				$.post(ctx + "/user/saveUserRole", {userId: userId, roleIds: arr.join(',')}, function(ret) {
					if (ret.state == "ok") {
						parent.events.search();//调用父页面的查询表格方法刷新数据
						events.close();
					} else {
						layer.alert(ret.msg || "服务器异常")
					}
				})
				return false;//阻止表单跳转
			});

			var events = {
				close : function() {
					var index = parent.layer.getFrameIndex(window.name);
					parent.layer.close(index);
				}
			};

			$('.layui-btn').on('click', function() {
				var type = $(this).attr('@event');
				events[type] ? events[type].call(this) : '';
			});
		});
	</script>
</body>
</html>